<template>
  <div>
    <el-table
      :data="formData.sysAutocodeItems"
      style="width: 100%;"
      class="sort-table mg-top20"
      v-bind="$attrs"
      row-key="id"
      v-on="$listeners"
      @cell-mouse-enter="
        row => {
          row.hover = true;
        }
      "
      @cell-mouse-leave="
        row => {
          row.hover = false;
        }
      "
    >
      <el-table-column width="60" class="cup" label="排序" prop="sort"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" class="cup" label="列名" prop="columnName" min-width="200"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" class="cup" label="说明" prop="columnComment" min-width="120"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="maxLength" class="cup" label="最大长度" min-width="120"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" class="cup" label="必填" min-width="60">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.required" :true-label="'1'" :false-label="'0'"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" class="cup" label="校验类型" min-width="200">
        <template slot-scope="scope">
          <el-select v-model="scope.row.ruleId" filterable>
            <el-option label="字符" value="1"></el-option>
            <el-option label="数字" value="2"></el-option>
            <el-option label="邮箱" value="3"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <span class="beforeBtn" @click="last">上一步</span>
      <span class="closeBtn" @click="cancel">取消</span>
      <el-button class="minWid btn btn-outline-primary ml-3" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
import addEdit from './addEdit';
import Sortable from 'sortablejs';

import { getAllTables } from '@/api/adminPage/sysAutoCode';

export default {
  name: 'autoCode',
  props: {
    from: {
      type: Object,
      require: true,
      default: () => {}
    },
    formData: {
      type: Object,
      require: true
    }
  },

  data() {
    return { };
  },
  mounted() {
    // 阻止默认行为
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    
  },
  created() {},
  methods: {
    cancel() {
      //初始化一些属性
      this.$emit('cancel');
    },
    last() {
      this.$emit('last');
    },
    next() {
      this.$emit('next', this.formData);
    } 
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-input__inner {
  background-color: #eff2f7 !important;
  border: 1px solid #ced4da !important;
  color: #74788d !important;
  padding: 0 12px !important;
  &::-webkit-input-placeholder {
    color: #74788d !important;
  }
}
.forms {
  max-height: calc(100vh - 360px);
  margin-top: 1.875rem;
}
.mg-top20 {
  margin-top: 25px;
  margin-bottom: 35px;
}

::v-deep .el-form-item__label {
  font-size: 13px;
  color: #495057;
  font-weight: 500;
  line-height: 32px;
  padding: 0 12px 0 0;
  margin: 0;
  text-align: right;
  float: left;
}

::v-deep .dialog-footer {
  border-top: 1px solid #eff2f7 !important;
  padding: 16px !important;
  margin-top: 16px;
}
.minWid {
  min-width: 108px;
}
.forms {
  padding-right: 0;
  max-height: calc(100vh - 360px);
}
.beforeBtn {
  float: left;
  line-height: 32px;
  color: #556de5;
  cursor: pointer;
}
.closeBtn {
  line-height: 32px;
  color: #73778d;
  cursor: pointer;
}
.title-h3 {
  font-weight: bold;
  span {
    padding-right: 10px;
    color: red;
  }
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label,
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label {
  &:after {
    content: '';
    margin-left: 0px;
  }
  &:before {
    content: '*';
    color: #f46a6a;
    margin-right: 4px;
  }
}
</style>
